<div class="underlying">
  <div class="table">
    <div class="bbs">
      <!-- 增加button -->
      <button class="btn_add" (click)="showinput()"></button>
      <!-- 下载文件 -->
      <button class="btn_download" (click)="downLoad()"></button>
      <div>
        <nz-input-group nzSearch [nzAddOnAfter]="suffixIconButton">
          <input type="text" nz-input placeholder="查詢料號 / 名稱 / 架位" [(ngModel)]="liaohao" />
        </nz-input-group>
        <ng-template #suffixIconButton>
          <button (click)="getData()" nz-button nzType="primary" nzSearch><i nz-icon nzType="search"></i>搜索</button>
        </ng-template>
      </div>
    </div>
    <!-- 头部Table -->
    <nz-table #headerTable style="border-collapse: collapse; border-radius: 4px 4px 0px 0px;" [nzData]="listOfData"
      class="designTable" [nzShowPagination]='false' [nzScroll]="{ y: '700px' }">
      <thead class="tableHeard" style="text-align: center !important;">
        <tr style="text-align: center !important;">
          <th nzWidth="80px"></th>
          <th nzWidth="80px"></th>
          <th nzWidth="200px">料號</th>
          <th nzWidth="300px">名稱</th>
          <th nzWidth="200px">單位</th>
          <th nzWidth="200px">架位</th>
          <th nzWidth="200px">類別</th>
          <th nzWidth="200px">安全庫存</th>
          <th>備註</th>
        </tr>
      </thead>
      <!-- 工联单Table -->
      <tbody class="tablecontent" style="border-left: 1px solid rgba(71,156,156,1) !important;">
        <!-- 新增 -->
        <tr class="tr_hover" id="addcnc" *ngIf="isShow">
          <!-- 确认按钮 -->
          <td style="padding:5px 8px;">
            <button nz-button [nzType]="'primary'" class="confirmAdd" (click)="confirmAdd()"></button>
          </td>
          <!-- 取消按钮 -->
          <td style="padding:5px 8px;">
            <button nz-button [nzType]="'primary'" class="cancelAdd" (click)="cancelAdd()"></button>
          </td>
          <td class="input_first" style="padding:5px 8px;"><input style="width: 150px;text-indent: 12px;"
              [(ngModel)]="material_no" name='' (ngModelChange)="pushLiaohao()"></td>
          <td class="input_first" style="padding:5px 15px;text-align: left;"><input
              style="width: 300px;text-indent: 12px;" [(ngModel)]="name" name=''></td>
          <td class="input_first" style="padding:5px 8px;"><input style="width: 80px;text-indent: 12px;"
              [(ngModel)]="unit" name=''></td>
          <td class="input_first" style="padding:5px 8px;"><input style="width: 135px;text-indent: 12px;"
              [(ngModel)]="shelf_position" name=''></td>
          <td class="input_first" style="padding:5px 8px;"><input style="width: 150px;text-indent: 12px;"
              [(ngModel)]="type" name=''></td>
          <td class="input_first" style="padding:5px 8px;"><input style="width: 110px;text-indent: 12px;"
              [(ngModel)]="safe_stock" name=''></td>
          <td class="input_first" style="padding:5px 8px;"><input style="width: 130px;text-indent: 12px;"
              [(ngModel)]="remark" name=''></td>
        </tr>
        <tr id="first" *ngFor="let item of listOfData let key = index">
          <!-- 编辑按钮 -->
          <td>
            <div class="editable-row-operations">
              <ng-container *ngIf="editCache[key].edit; else saveTpl">
                <a (click)="startEdit(key)"><img src="../../../assets/image/icon_edit_white.svg"></a>
              </ng-container>
              <ng-template #saveTpl>
                <a (click)="saveEdit(key)"><img src="../../../assets/image/icon_ok.svg"></a>
              </ng-template>
            </div>
          </td>
          <!-- 删除按钮 -->
          <td>
            <button nz-button [nzType]="'primary'" class="del" *ngIf="editCache[key].isdel"
              (click)="showModal(item)"></button>
            <a (click)="cancelEdit(key)" *ngIf="!editCache[key].edit"><img
                src="../../../assets/image/icon_cancel.svg"></a>
          </td>
          <!-- 料號 -->
          <td class="input_first">
            <ng-container *ngIf="editCache[key].edit; else material_no">
              {{item.material_no}}
            </ng-container>
            <ng-template #material_no>
              <input style="width: 150px;color:#ffffff;" type="text" nz-input
                [(ngModel)]="editCache[key]['data'].material_no" />
            </ng-template>
          </td>
          <!-- 名称 -->
          <td class="input_first"
            style="cursor:pointer;max-width: 300px; text-indent: 15px; overflow: hidden; white-space: nowrap;text-overflow: ellipsis;text-align: left;"
            title={{item.name}}>
            <ng-container *ngIf="editCache[key].edit; else name">
              {{item.name}}
            </ng-container>
            <ng-template #name>
              <input style="width: 300px;color:#ffffff;" type="text" nz-input
                [(ngModel)]="editCache[key]['data'].name" />
            </ng-template>
          </td>
          <!-- 單位 -->
          <td class="input_first">
            <ng-container *ngIf="editCache[key].edit; else unit">
              {{item.unit}}
            </ng-container>
            <ng-template #unit>
              <input style="width: 80px;color:#ffffff;" type="text" nz-input
                [(ngModel)]="editCache[key]['data'].unit" />
            </ng-template>
          </td>
          <!-- 架位 -->
          <td class="input_first">
            <ng-container *ngIf="editCache[key].edit; else shelf_position">
              {{item.shelf_position}}
            </ng-container>
            <ng-template #shelf_position>
              <input style="width: 135px;color:#ffffff;" type="text" nz-input
                [(ngModel)]="editCache[key]['data'].shelf_position" />
            </ng-template>
          </td>
          <!-- 類別 -->
          <td class="input_first">
            <ng-container *ngIf="editCache[key].edit; else type">
              {{item.type}}
            </ng-container>
            <ng-template #type>
              <input style="width: 150px;color:#ffffff;" type="text" nz-input
                [(ngModel)]="editCache[key]['data'].type" />
            </ng-template>
          </td>
          <!-- 安全庫存 -->
          <td class="input_first">
            <ng-container *ngIf="editCache[key].edit; else safe_stock">
              {{item.safe_stock}}
            </ng-container>
            <ng-template #safe_stock>
              <input style="width: 110px;color:#ffffff;" type="text" nz-input
                [(ngModel)]="editCache[key]['data'].safe_stock" />
            </ng-template>
          </td>
          <!-- 备注 -->
          <td class="input_first"
            style="cursor:pointer;max-width: 130px; overflow: hidden; white-space: nowrap;text-overflow: ellipsis;"
            title={{item.remark}}>
            <ng-container *ngIf="editCache[key].edit; else remark">
              {{item.remark}}
            </ng-container>
            <ng-template #remark>
              <input style="width: 130px;color:#ffffff;" type="text" nz-input
                [(ngModel)]="editCache[key]['data'].remark" />
            </ng-template>
          </td>
        </tr>
      </tbody>
    </nz-table>
    <!-- 删除弹出框-->
    <nz-modal [(nzVisible)]="isVisible" nzTitle="刪除" (nzOnCancel)="handleCancel()" (nzOnOk)="handleOk()"
      [nzMaskStyle]="{backgroundColor:'rbga(48,73,77,.05)'}"
      [nzBodyStyle]="{height:'200px',background:'rgba(31,46,49,1)',color:'#ffffff',fontSize:'20px',fontWight:'300',textAlign:'center',lineHeight:'200px'}">
      <p>確定刪除嗎？</p>
    </nz-modal>
  </div>
</div>
